
<template>
<div>
    <Scroll v-if="data.length" :on-reach-bottom="handleReachBottom" :height="height" :distance-to-edge="[1,1]">
        <Row :gutter="8" type="flex" v-if="data.length">
            <template v-for="(item,index) in data">
                <Col :key="item.id">
                    <cardImage @imgdel="imgdel" :data="item" :typeList="typeList" :index="index"/>
                </Col>
            </template>
        </Row>
        <div v-if="Message " style="display: flex;align-items: center;justify-content: center;color: #aaa;">被你看完了</div>
    </Scroll>
    <div v-else style="height:300px;display: flex;align-items: center;justify-content: center;color: #aaa;">暂无数据</div>
</div>
</template>
<script>
    import cardImage from './cardImage.vue'
    import { rbacmenumenuclick  } from '@api/menuclick';
    import { materialimghotlist, materialtags  } from '@/api/sourcematerial.js'
    export default {
        name: 'app',
        props: {
            remark: String
        },
        components: { cardImage },
        data () {
            return {
                Message: false,
                height: null,
                typeList: [],
                data: [],
                params: { remark: '', page: 1, pageSize: 24 },
                total:null
            }
        },
        mounted () {
            this.height = document.documentElement.clientHeight - 320
            this.gettagtype()
        },
        created () {
        },
        methods: {
            imgdel(index) {
                this.data.splice(index, 1)
            },
            // 获取类别
            gettagtype () {
                materialtags({}).then(res => {
                    this.typeList = res;
                })
            },
            initial() {
                this.params.page = 1
                this.askData()
                this.rbacmenumenuclick()
            },
            rbacmenumenuclick(){
                let params={
                    menu_name:'素材库',
                    module_name:'热门'
                }
                rbacmenumenuclick(params).then(() => {}).catch(() => {})
            },
            askData() {
                this.params.remark = this.remark
                this.Message = false
                materialimghotlist(this.params).then(res=>{
                    this.total = res.total
                    this.data = res.list
                })
            },
            askDatas() {
                this.params.remark = this.remark
                materialimghotlist(this.params).then(res=>{
                    this.data.push(...res.list)
                })
            },
            handleReachBottom() {
                if (this.total > this.params.pageSize * this.params.page) {
                    this.params.page++
                    this.askDatas()
                } else {
                   this.Message = true
                }
            }
        }
    }
</script>
